import { useMemo, useState } from 'react';

function calcNumber(count: number) {
  console.log('cal重新计算');
  let total = 0;
  for (let i = 1; i <= count; i++) {
    total += i;
  }
  return total;
}

const MemoHookDemo01 = () => {
  const [count, setCount] = useState(10);
  const [show, setShow] = useState(true);
  // const total = calcNumber(count);
  const total = useMemo(() => {
    return calcNumber(count);
  }, [count]);
  return (
    <div>
      <h2>计算数字的和：{total}</h2>
      <button
        onClick={() => {
          setCount((count: number) => count + 1);
        }}
      >
        +1
      </button>
      <button
        onClick={() => {
          setShow(!show);
        }}
      >
        show切换
      </button>
    </div>
  );
};

export default MemoHookDemo01;
